<template>
  <div id="FaultDispatch">
    <!--查询表单-->
    <el-form label-position="left" size="mini" :inline="true" :model="queryForm" label-width='90px' class="query-form">
        <el-form-item label="采购员姓名">
            <el-input v-model="queryForm.cgxm" clearable placeholder="请输入采购员姓名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getData(1)">查询</el-button>
            <!-- <el-button type="primary" @click="clearQuery">清空</el-button> -->
            <el-button type="primary"  icon="el-icon-circle-plus" size="mini" @click="dialogAddVisible = true">新增</el-button>
            <!-- <el-button type="primary" icon="iconfont icon--daochu"  size="mini" @click="export2Excel">导出</el-button> -->
        </el-form-item>
       
    </el-form>

    <!--客户表格数据展示-->
    <el-table class="table" ref="table" :data="tableData" border style="width: 100%;"
        @sort-change="sortChange" v-loading="loading" :header-cell-style="{padding: 0,height: '34px'}"
      >
      <el-table-column prop="cgxm" label="姓名" sortable="custom" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="sjhm"  sortable="custom" label="手机号码"></el-table-column>
      <el-table-column prop="cgsj" sortable label="采购时间"></el-table-column>
      <!-- <el-table-column prop="qy" sortable="custom" label="区域"></el-table-column> -->
      <!-- <el-table-column prop="gswg" sortable="custom" label="区域/装维">
        <template slot-scope="scope">
          <p><span>{{scope.row.qy}}</span><span v-if="scope.row.zwsfCname">({{scope.row.zwsfCname}})</span></p>
        </template>
      </el-table-column> -->
      <el-table-column prop="sbmc" sortable="custom" label="设备名称" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="cgsl" sortable="custom" label="采购数量" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="cgdj" sortable="custom" label="采购单价"  :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="bz" sortable="custom" label="备注"  :show-overflow-tooltip="true"></el-table-column>
    
    </el-table>

    <!--客户表格数据分页-->
    <el-pagination v-if="count" background layout="total,prev, pager, next"
        :page-size="pageSize"
        @current-change="getData"
        :current-page="currentPage"
        :total="count" style="float: right;">
    </el-pagination>

    <!--新增采购单-->
    <el-dialog title="采购信息录入" width="900px" @close="closeAdd" class="dialog dialogAdd" custom-class="custom-dialog"
               :visible.sync="dialogAddVisible" :close-on-click-modal='false'>
      <el-form ref="addForm" style="margin-right: 20px;" :model="addForm" :inline="true" :rules="addFormRules" label-position="right" label-width="100px" size="mini">
        <!-- <el-form-item label="宽带捆绑号码">
          <el-input v-model="khzh" clearable placeholder="" style="margin-right: 7px;">
          </el-input><el-button type="primary" size="mini" @click="getKhzl">查询</el-button>
        </el-form-item> -->
        <el-form-item label="姓名" prop="cgxm">
          <el-input v-model="addForm.cgxm" placeholder="请输入采购员姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="sjhm">
          <el-input v-model="addForm.sjhm" placeholder="请输入手机号码">></el-input>
        </el-form-item>
          <el-form-item label="采购时间" prop="cgsj">
          <!-- <el-date-picker v-model="addForm.cgsj" 
            type="date" placeholder="选择采购时间">
          </el-date-picker> -->
                 <el-date-picker v-model="addForm.cgsj" value-format="yyyy-MM-dd " format="yyyy-MM-dd "
            type="date" placeholder="请选择采购时间">
          </el-date-picker>
        </el-form-item>
         <!-- <el-form-item label="设备名称" prop="khhm">
          <el-input v-model="addForm.khhm"></el-input>
        </el-form-item>  -->
          <el-form-item label="设备名称" prop="sbmc">
          <el-select v-model="addForm.sbmc" clearable placeholder="请选择采购设备名称">
            <el-option
              v-for="value in gzlxList"
              :key="value"
              :label="value"
              :value="value">
            </el-option>
          </el-select>
        </el-form-item> 
        <el-form-item label="采购数量" prop="cgsl">
          <el-input v-model="addForm.cgsl" placeholder="请输入采购设备数量"></el-input>
        </el-form-item>
        <el-form-item label="采购单价" prop="cgdj">
          <el-input v-model="addForm.cgdj" placeholder="请输入设备采购单价"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="bz">
          <el-input v-model="addForm.bz" placeholder="请输入备注"></el-input>
        </el-form-item>
         <el-form-item label="" prop="">
      
        <el-button type="primary" size="mini" @click="import2Excel" id="aa">导入</el-button>
        </el-form-item>
    
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="add" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  
  </div>
</template>

<script>
import 'viewerjs/dist/viewer.css'
import Viewer from "v-viewer/src/component.vue"
export default {
  name: 'FaultDispatch',
  components: {
    Viewer
  },
  data () {
    return {
      gzlxList:["光猫","分光器","机顶盒","光纤","尾纤",'工衣','电脑','熔纤机', '切割机', '米勒钳','光功率','红光笔','伸缩梯','小电视','安全用品','高清电视','皮线开剥器','蓝牙标签机'],//材料设备,
      queryForm: {},    //  查询条件
      prop: 'createTime', //  排序属性
      order: -1,    //  排序 升序、降序
      tableData: [],    //  当前页数据
      loading: false,
      query_show: false,          //  是否显示更多查询
      count: '',      //  总数据条数
      currentPage: 1,//默认开始页面
      pageSize: 20,//每页的数据条数
    /************************新增故障单********************* */
      addForm: {
        cgxm: '',
        sjhm: '',
        cgsj: '',
        sbmc: '',
        cgsl:'',
        cgdj:'',
        bz:'' ,
       
      },                //  新增表单
      addFormRules:{
          cgxm: [{ required: true, validator: this.isNull , trigger: 'blur'}],
          sjhm: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          cgsj: [{ required: true, validator: this.isNull, trigger: 'change'}],
          sbmc: [{ required: true, validator: this.isNull, trigger: 'change' }],
          cgsl: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          cgdj: [{ required: true, validator: this.isNull, trigger: 'blur' }],
          // cgsj: [{ required: true, validator: this.isNull, trigger: 'change' }],
          // qw: [{ required: true, validator: this.isArrayNull, trigger: 'change' }],
          // sex: [{ required: true, validator: this.isNull, trigger: 'change' }]
      },//新增校验规则
      khzh: '',         //  新增时搜索
      dialogAddVisible: false,    //  新增模态框
      options: [],
    
    }
  },
  mounted(){
    this.getData(1)
    this.getWg()
  },

  methods: {
    // getData(val){
    //   let params = {}
    //   let queryForm = this.deepClone(this.queryForm)
    //   params.currentPage = val
    //   params.pageSize = this.pageSize
    //   params.queryForm = queryForm
    //   params.prop = this.prop
    //   params.order = this.order
    //    this.startLoading()
    //   this.$post("/api/CgController/getCgList",params, (data) => {
    //     this.tableData = data.list;
    //     this.count = data.count;
    //     this.loading = false
        
    //   })
    // },

      getData(val){
      let params = {}
      let queryForm = this.deepClone(this.queryForm)
      params.currentPage = val
      params.pageSize = this.pageSize
      params.queryForm = queryForm
      params.prop = this.prop
      params.order = this.order
       this.startLoading()
      this.$post("/api/CgController/getCgList",params, (data) => {
        this.tableData = data.list;
        this.count = data.count;
        this.loading = false
        
      })
    },
    //  清空查询
    clearQuery(){
        this.queryForm = {}
        this.getData(1)
    },
    // 排序
    sortChange(obj){
      this.prop = obj.prop || "createTime"
      this.order = obj.order == 'ascending' ? 1 : -1
      this.getData(1)
    },
     /***********************导入******************* */
    import2Excel(){},
  /***********************导出******************* */
    formatJson(filterVal, jsonData) {
　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　},
//     export2Excel() {
//       let params = {}
//       let queryForm = this.deepClone(this.queryForm)
//       params.currentPage = 1
//       params.queryForm = queryForm
//       params.prop = this.prop
//       params.order = this.order
//       this.$post("/api/GzdController/getList",params, (data) => {
//         let tableData = data.list;
//         require.ensure([], () => {
//   　　　　const { export_json_to_excel } = require('../vendor/Export2Excel');
//   　　　　const tHeader = this.config.gzdHeader;
//   　　　　const filterVal = this.config.gzdFilterVal;
//   　　　　const data = this.formatJson(filterVal, tableData);
//   　　　　export_json_to_excel(tHeader, data, '故障单');
//   　　　})
//       })
// 　  },
  /******************新增***************** */
    //  获取网格
    getWg(){
      // let params = {}
      // params.currentPage = 1
      // params.queryForm = {}
      // params.prop = 'name'
      // params.order = 1
      // this.$post("/api/CgController/getCgList",params, (data) => {
      //   let options = []
      //   let qyList = this.config.qyList
      //   qyList.map(item => {
      //     options.push({
      //       value: item,
      //       label: item,
      //       children: []
      //     })
      //   })
      //   data.list.map(item => {
      //     let index = qyList.indexOf(item.qy)
      //     if(index != -1){
      //       options[index].children.push({
      //         value: item.name + '/' + item.id,
      //         label: item.name,
      //       })
      //     }
      //   })
      //   this.options = options
      // })

//  let params = {}
//       let queryForm = this.deepClone(this.queryForm)
//       params.currentPage = val
//       params.pageSize = this.pageSize
//       params.queryForm = queryForm
//       params.prop = this.prop
//       params.order = this.order
//       this.startLoading()
//       this.$post("/api/CgController/getCgList",params, (data) => {
//         this.tableData = data.list;
//         this.count = data.count;
//         this.loading = false
//       })

    },
    //  获取客户资料
    // getKhzl(){
    //   this.$post("/api/KhzlController/getKhzl", {id: this.khzh}, (data) => {
    //     if(data.khzl){
    //       this.addForm.khzh = data.khzl.khzh
    //       this.addForm.khxm = data.khzl.khxm
    //       this.addForm.khhm = data.khzl.khhm
    //       this.addForm.khdz = data.khzl.khdz
    //     }else{
    //       this.$message.error("当前客户不存在")
    //     }
    //   })
    // },
    // 打开新增模态框
    openAdd(){
      
    },
    // 关闭新增模态框
    closeAdd(){
      this.$refs.addForm.resetFields()
       this.khzh = ''
    },
    // 确定新增
    add(){
      this.$refs.addForm.validate((valid) => {
        if (valid) {
           let addForm = this.deepClone(this.addForm)
          //   if(addForm.gswg && addForm.gswg.length){
          //     addForm.qy = addForm.gswg[0]
          //     addForm.gswgId = addForm.gswg[1].split("/")[1]
          //    addForm.gswg = addForm.gswg[1].split("/")[0]
          //  }
          //  if(addForm.zwsfId){
          //     addForm.zwsfCname = addForm.zwsfId.split('/')[1]
          //     addForm.zwsfId = addForm.zwsfId.split('/')[0]
          //   }
          this.$post("/api/CgController/addOne", addForm, (data) => {
          
            this.$message.success("添加成功！")
            this.dialogAddVisible = false
            this.getData(1)
          })
        }
      })
    },
//

 //
  
  }
}
</script>

<style lang="less" scoped>
  .custom-dialog{
    margin-top: 0 !important;
  }
  .dialogAdd {
    .el-input, .el-cascader, .el-select, .el-textarea {
      width: 300px;
    }
  }

  .label-box{
    display: flex;
    margin-bottom: 5px;
    .label-text{
      width: 100px;
      text-align: right;
      padding-right: 10px;
    }
    .label-value{
      flex: 1;
    }

  }
  .gzd-detail{
    td{
      vertical-align: top;
    }
  }
</style>
<style lang="less">
    .long-form .el-form-item__label{
      line-height: 16px;
    }
    #FaultDispatch .custom-dialog{
      margin-top: 10vh !important;
    }
    #aa{

      float: right;
    }
    #FaultDispatch .gzdxq-dialog{
      margin-top: 5vh !important;
      height: 85vh;
      .el-dialog__body{
        padding-top: 0;
        height: calc(100% - 44px);
        .el-tabs{
          height: 100%;
          .el-tabs__content{
            height: calc(100% - 60px);
            overflow: auto;
          }
        }
      }
    }
</style>

